<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>物流员中心 - 物流追踪系统</title>
    <link rel="stylesheet" href="../../css/styles.css">
    <link rel="stylesheet" href="../../css/responsive.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 本地jQuery -->
    <script src="../../js/lib/jquery-3.6.0.min.js"></script>
    <!-- 如需使用本地jQuery，请手动下载并保存到js/lib目录 -->
</head>
<body>
    <header>
        <div class="container header-container">
            <div class="logo">
                <i class="fas fa-truck-fast"></i>
                <h1>物流追踪系统</h1>
            </div>
            <nav class="main-nav">
                <ul>
                        <li><a href="../../index.html"><i class="fas fa-home"></i> 首页</a></li>
                        <li><a href="../../pages/user/dashboard.html"><i class="fas fa-user"></i> 用户中心</a></li>
                        <li><a href="dashboard.html" class="active"><i class="fas fa-truck"></i> 物流员中心</a></li>
                        <li><a href="../../pages/admin/dashboard.html"><i class="fas fa-cogs"></i> 管理员中心</a></li>
                        <li><a href="#" id="logout-btn"><i class="fas fa-sign-out-alt"></i> 退出登录</a></li>
                    </ul>
            </nav>
            <button class="mobile-menu-btn">
                <i class="fas fa-bars"></i>
            </button>
        </div>
    </header>

    <main class="container" id="app-container">
        <section class="hero">
            <div class="hero-content">
                <h2>物流员工作中心</h2>
                <p>高效管理您的配送任务，实时更新包裹状态，提供优质物流服务</p>
            </div>
        </section>

        <section class="features">
            <!-- 查询统计卡片 -->
            <div class="card animate-on-scroll">
                <div class="card-header">
                    <h2><i class="fas fa-chart-line"></i> 工作统计</h2>
                </div>
                <div class="card-content">
                    <div class="stats-container">
                        <div class="stat-card">
                            <div class="stat-value">3</div>
                            <div class="stat-label">当前包裹</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-value">12</div>
                            <div class="stat-label">已完成</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-value">48</div>
                            <div class="stat-label">今日配送</div>
                        </div>
                    </div>
                    <!-- 图表功能暂时禁用 -->
                    <!-- <div class="chart-container">
                        <canvas id="trackingChart"></canvas>
                    </div> -->
                </div>
            </div>

        </section>

        <section class="package-section">
            <h2>待配送包裹</h2>
            <div id="package-list" class="package-list animate-on-scroll"></div>
        </section>
    </main>

    <footer>
        <div class="container footer-container">
            <div class="footer-section">
                <h3>关于我们</h3>
                <p>物流追踪系统致力于为用户提供高效、便捷、可靠的物流信息追踪服务，让物流变得更加透明和可控。</p>
                <div class="social-links">
                    <a href="#"><i class="fab fa-weixin"></i></a>
                    <a href="#"><i class="fab fa-weibo"></i></a>
                    <a href="#"><i class="fab fa-qq"></i></a>
                </div>
            </div>
            <div class="footer-section">
                <h3>快速链接</h3>
                <ul>
                    <li><a href="../../index.html">首页</a></li>
                    <li><a href="dashboard.html">物流员中心</a></li>
                    <li><a href="update.html">更新物流</a></li>
                    <li><a href="../../pages/auth/login.html">登录</a></li>
                    <li><a href="../../pages/auth/register.html">注册</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h3>帮助中心</h3>
                <ul>
                    <li><a href="#">常见问题</a></li>
                    <li><a href="#">使用指南</a></li>
                    <li><a href="#">联系我们</a></li>
                    <li><a href="#">隐私政策</a></li>
                    <li><a href="#">服务条款</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h3>联系我们</h3>
                <ul>
                    <li><i class="fas fa-phone"></i> 400-123-4567</li>
                    <li><i class="fas fa-envelope"></i> support@wuliuzhuizong.com</li>
                    <li><i class="fas fa-map-marker-alt"></i> 北京市朝阳区物流大厦15层</li>
                </ul>
            </div>
        </div>
        <div class="container footer-bottom">
            <p>&copy; 2023 物流追踪系统 版权所有</p>
        </div>
    </footer>

    <script>
        // 等待DOM加载完成
        document.addEventListener('DOMContentLoaded', function() {
            // 移动端菜单切换
            const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
            const mainNav = document.querySelector('.main-nav');

            if (mobileMenuBtn && mainNav) {
                mobileMenuBtn.addEventListener('click', function() {
                    mainNav.classList.toggle('active');
                    mobileMenuBtn.querySelector('i').classList.toggle('fa-bars');
                    mobileMenuBtn.querySelector('i').classList.toggle('fa-times');
                });
            }

            // 退出登录
            document.getElementById('logout-btn').addEventListener('click', (e) => {
                e.preventDefault();
                // 简单的退出登录实现
                localStorage.removeItem('token');
                window.location.href = '../../pages/auth/login.html';
            });

            // 滚动动画
            const animateOnScroll = () => {
                const elements = document.querySelectorAll('.animate-on-scroll');
                elements.forEach(element => {
                    const elementPosition = element.getBoundingClientRect().top;
                    const screenPosition = window.innerHeight / 1.2;

                    if (elementPosition < screenPosition) {
                        element.classList.add('visible');
                    }
                });
            };

            // 首次调用
            animateOnScroll();

            // 滚动时调用
            window.addEventListener('scroll', animateOnScroll);

            // 初始化包裹列表
            initPackageList();
        });

        // 初始化包裹列表
        function initPackageList() {
            try {
                // 使用模拟数据
                const mockData = [
                    {
                        id: 'PKG123456',
                        destination: '北京市朝阳区建国路88号',
                        status: 'pending',
                        receiver: '张三',
                        recipientPhone: '13800138000',
                        estimatedDelivery: '2023-10-15'
                    },
                    {
                        id: 'PKG234567',
                        destination: '上海市浦东新区张江高科技园区',
                        status: 'in-transit',
                        receiver: '李四',
                        recipientPhone: '13900139000',
                        estimatedDelivery: '2023-10-16'
                    },
                    {
                        id: 'PKG345678',
                        destination: '广州市天河区珠江新城',
                        status: 'pending',
                        receiver: '王五',
                        recipientPhone: '13700137000',
                        estimatedDelivery: '2023-10-17'
                    }
                ];
                renderPackageList(mockData);
            } catch (error) {
                console.error('初始化包裹列表失败:', error);
                alert('系统错误，请稍后再试');
            }
        }

        // 渲染包裹列表
        function renderPackageList(packages) {
            const container = document.getElementById('package-list');
            if (!container) return;

            if (packages.length === 0) {
                container.innerHTML = `
                    <div class="card">
                        <div class="card-header">
                            <h2>我的包裹</h2>
                        </div>
                        <div class="no-data">
                            <p>暂无包裹信息</p>
                        </div>
                    </div>
                `;
                return;
            }

            // 状态样式映射
            const statusClassMap = {
                'pending': 'status-pending',
                'in-transit': 'status-transit',
                'delivered': 'status-delivered',
                'cancelled': 'status-cancelled'
            };

            let html = `
                <div class="card">
                    <div class="card-header">
                        <h2>我的包裹</h2>
                    </div>
                    <div class="table-container">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>运单编号</th>
                                    <th>状态</th>
                                    <th>收件人</th>
                                    <th>目的地</th>
                                    <th>预计送达</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
            `;

            packages.forEach(pkg => {
                // 获取状态文本
                let statusText = '未知状态';
                if (pkg.status === 'pending') statusText = '待发货';
                else if (pkg.status === 'in-transit') statusText = '运输中';
                else if (pkg.status === 'delivered') statusText = '已送达';
                else if (pkg.status === 'cancelled') statusText = '已取消';

                html += `
                    <tr>
                        <td>${pkg.id}</td>
                        <td><span class="${statusClassMap[pkg.status] || ''}">${statusText}</span></td>
                        <td>${pkg.receiver}</td>
                        <td>${pkg.destination}</td>
                        <td>${pkg.estimatedDelivery}</td>
                        <td>
                            <button class="btn-action" onclick="viewPackage('${pkg.id}')">查看</button>
                            <button class="btn-action" onclick="updateStatus('${pkg.id}')">更新状态</button>
                        </td>
                    </tr>
                `;
            });

            html += `
                            </tbody>
                        </table>
                    </div>
                </div>
            `;

            container.innerHTML = html;
        }

        // 查看包裹详情
        function viewPackage(packageId) {
            alert('查看包裹: ' + packageId);
            // 这里可以添加跳转到包裹详情页的逻辑
        }

        // 更新包裹状态
        function updateStatus(packageId) {
            alert('更新包裹状态: ' + packageId);
            // 这里可以添加更新包裹状态的逻辑
        }
    </script>
<style>
    /* 物流员中心特有样式 */
    .stat-value {
        font-size: 2.5rem;
        font-weight: bold;
        color: var(--primary-color);
        margin: 1rem 0;
    }

    .package-section {
        background-color: white;
        padding: 2rem;
        border-radius: 8px;
        box-shadow: var(--box-shadow);
        margin-bottom: 3rem;
    }

    .package-section h2 {
        color: var(--secondary-color);
        margin-bottom: 1.5rem;
        text-align: center;
    }

    .package-list {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .package-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        border-radius: 8px;
        background-color: var(--light-color);
        transition: var(--transition);
    }

    .package-item:hover {
        transform: translateY(-3px);
        box-shadow: var(--box-shadow);
    }

    .package-info {
        flex: 1;
    }

    .package-id {
        font-weight: bold;
        color: var(--secondary-color);
    }

    .package-destination {
        color: var(--dark-color);
        margin: 0.5rem 0;
    }

    .package-status {
        display: inline-block;
        padding: 4px 10px;
        border-radius: 4px;
        font-size: 0.8rem;
        font-weight: bold;
    }

    .status-pending {
        background-color: #f39c12;
        color: white;
    }

    .status-delivered {
        background-color: var(--success-color);
        color: white;
    }

    .status-transit {
        background-color: var(--primary-color);
        color: white;
    }

    .package-actions {
        display: flex;
        gap: 0.5rem;
    }

    .btn-action {
        background-color: var(--primary-color);
        color: white;
        border: none;
        padding: 8px 15px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 0.9rem;
        transition: var(--transition);
    }

    .btn-action:hover {
        background-color: #2980b9;
        transform: translateY(-2px);
    }
</style>
</body>
</html>